<!-- 专家列表信息卡片 -->
<template>
  <view class="infoCard">
    <view class="disFlx pa-15">
      <view class="leftBox shrink0">
        <u-image
          :src="item.headimg"
          width="180rpx"
          height="180rpx"
          mode="aspectFill"
        ></u-image>
        <view v-if="showStatus">
          <view class="status status2" v-if="item.status == 2">通话中</view>
          <view class="status status3" v-if="item.status == 0 || item.status == 1">离线</view>
          <view class="status" v-if="item.status == 3">在线</view>
        </view>
      </view>
      <view class="rightBox">
        <view>
          <view class="pt-1">
            <text class="color3 fz-16">{{ item.userName || ''}}</text>
            <text v-if="item.postName" class="fz-16 pl-15">{{item.postName}}</text>
            <text v-if="item.deptname" class="pl-15">{{ item.deptname}}</text>
          </view>
          <view v-if="item.com" class="pt-12">
            {{ item.com }}
          </view>
          <slot name="rightContent"></slot>
        </view>
        <view class="disFlxAC" style="flex-wrap: wrap;" v-if="showTag">
          <view
            class="fz-12 tag ov-2"
            v-for="(tag, tagIndex) in splitRetuen(item.speciality)"
            :key="tagIndex"
            v-if="tagIndex < 3"
          > 
            {{ tag }}
          </view>
        </view>
        <view class="disFlxAC color3" v-else>
          累计服务次数<text class="pl-10">{{ item.cnum || 0 }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { splitRetuen } from "@/utils/common.js";

export default {
  props: {
    item: {
      type: Object,
      default: {},
    },
    // 是否显示状态,默认显示
    showStatus: {
      type: Boolean,
      default: true,
    },
    // 是否显示标签,默认显示,否则显示咨询次数
    showTag: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },

  methods: {
    splitRetuen
  },
};
</script>
<style lang='scss' scoped>
.infoCard {
  background-color: #ffffff;
  .leftBox {
    width: 180rpx;
    height: 180rpx;
    margin-right: 30rpx;
    position: relative;
    .status {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%,50%);
      color: #FFFFFF;
      background-color: #20D19A;
      font-size: 24rpx;
      border-radius: 34rpx;
      padding: 4rpx 16rpx;
      white-space: nowrap;
    }
    .status2 {
      background-color: #FF6B6B !important;
    }
    .status3 {
      background-color: #DDDDDD !important;
      color: #AAABAB !important;
    }
  }
  .rightBox {
    display: flex;
    flex-direction: column;
    .tag {
      line-height: 40rpx;
      padding: 0 18rpx;
      border-radius: 50rpx;
      background: #f5f5f5;
      margin-top: 16rpx;
    }
    .tag + .tag {
      margin-left: 16rpx;
    }
  }
}
</style>